<template>

  <a-modal
    :title="title"
    :width="700"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">

      <a-form :form="form">
        <a-row>
          <a-col :span="9">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="车位编号">
              <p style="font-size: 20px;font-weight: 500;margin: 0;text-align: center">{{ this.model.parkNumber }}</p>
            </a-form-item>

            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="租户姓名">
              <a-input :disabled="true" :value="this.model.userName"/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="租户手机号码">
              <a-input :disabled="true" :value="this.model.mobile"/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="车位备注">
              <a-textarea
                :auto-size="{ minRows: 6, maxRows: 6 }"
                :disabled="true"
                v-decorator="['parkSpaceRemark',{}]">
              </a-textarea>
            </a-form-item>
          </a-col>
          <a-col :offset="2" :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="有效期开始时间">
              <a-date-picker
                format="YYYY-MM-DD"
                :disabled="true"
                v-decorator="[ 'startTime', {rules: [{ required: true, message: '请选择起始时间!' }],}]"/>
            </a-form-item>

            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="有效期结束时间">
              <a-date-picker
                format="YYYY-MM-DD"
                v-decorator="[ 'endTime', {rules: [{ required: true, message: '请选择起始时间!' }],}]"/>
            </a-form-item>

            <a-row>
              <a-table
                size="small"
                bordered
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource"
                :loading="confirmLoading"
                :pagination="false"
                :defaultExpandAllRows="true"
                style="word-break: break-all">
              </a-table>
            </a-row>

          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>


</template>

<script>
import {httpAction, postAction} from "@api/manage";
import pick from "lodash.pick";
import moment from "moment";

export default {
  name: "ParkingSpaceDelayModal",
  data(){
    return{
      form:this.$form.createForm(this),
      title:'',
      visible:false,
      confirmLoading:false,
      model:{},
      labelCol: {
        xs: {span: 24},
        sm: {span: 12},
        style: 'textAlign: left',
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
      // 表头
      columns: [
        {
          title: '车牌号',
          dataIndex: 'plateNo',
          width: 80,
          align: "center"
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 100,
          align: "center"
        },
      ],
      dataSource: [],
      url:{
        delay:'/parkCar/parkNumber/delay',
        queryCarList: '/parkCar/parkNumber/queryCarList',
      }
    }
  },
methods:{
  edit(record){
    this.visible = true;
    this.confirmLoading = true
    this.form.resetFields();
    Object.assign(this.model, record);
    this.$nextTick(() => {
      this.form.setFieldsValue(pick(this.model, 'parkSpaceRemark'))

      this.form.setFieldsValue({startTime: this.model.startTime ? moment(this.model.startTime) : null})
      this.form.setFieldsValue({endTime: this.model.endTime ? moment(this.model.endTime) : null})

      this.loadParkNumberData()
    });
  },
  handleOk(){
    const that = this;
    // 触发表单验证
    this.form.validateFields((err, values) => {
      if (!err) {
        let params = {}
        params.id = this.model.id
        let startTime = this.form.getFieldValue("startTime")
        let endTime = this.form.getFieldValue("endTime")
        if(endTime===null)
        {
          that.$message.error("请选择结束时间")
          return
        }
        else {
         if(endTime<startTime)
         {
           that.$message.error("过期时间不能早于有效期开始时间")
           return;
         }
        }
        params.endTime = endTime.format('YYYY-MM-DD 23:59:59')
        this.confirmLoading = true
        httpAction(that.url.delay, params, 'post').then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.$emit('ok');
            that.close();
          } else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      }
    })
  },
  handleCancel(){
    this.close()
  },
  loadParkNumberData() {
    const that = this
    let params = {}
    params.parkNumber = this.model.parkNumber
    postAction(this.url.queryCarList, params).then(res => {
      if (res.success) {
        that.dataSource = res.result
      }
      that.confirmLoading = false
    })
  },
  close () {
    this.$emit('ok');
    this.visible = false;
  },

}
}
</script>

<style scoped>

</style>
